<template>
    <div>
        <a-breadcrumb separator="" style="margin: 10px 0px">
            <a-breadcrumb-item>分类路径</a-breadcrumb-item>
            <a-breadcrumb-separator>:</a-breadcrumb-separator>
            <template v-for="(item,i) in pathList" :key="i">
                <a-breadcrumb-item href="" @click="returnSuper(item.parentId,i)">{{item.name}}</a-breadcrumb-item>
                <a-breadcrumb-separator v-if="pathList.length != (i + 1)" />
            </template>
        </a-breadcrumb>
        <a-table :dataSource="categoryList"
                 :columns="columns"
                 :pagination="false"
                 bordered>
            <template v-slot:action="{text,record}">
                <a-button type="primary" v-if="pathList.length != 3" @click="showChildren(record)">查看下级</a-button>
            </template>
        </a-table>
    </div>
</template>

<script lang="ts">
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    export default {
        name: "admin-category",
        setup() {
            const columns = [
                {
                    title: 'ID',
                    dataIndex: 'id',
                    key: 'id',
                    align: 'center'
                },
                {
                    title: '类型名称',
                    dataIndex: 'name',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '分类Id',
                    dataIndex: 'typeId',
                    key: 'typeId',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    slots: {customRender: 'action'},
                    align: 'center'
                }
            ]

            const categoryList = ref()
            const pathList = ref<{name:string,parentId:number}[]>([])

            const showChildren = (obj:any) =>{
                pathList.value.push({
                    name: obj.name,
                    parentId: obj.id
                })
                load(obj.id)
            }

            const returnSuper = (id:number,index:number) =>{
                pathList.value.splice(index + 1)
                console.log("裁剪后：",pathList.value)
                load(id)
            }

            const load = (parentId=0) => {
                axios.get('/mall-manager/category/queryByParentId/' + parentId).then(rs => {
                    console.log("查找结果：", rs)
                    categoryList.value = rs.data.data
                })
            }

            onMounted(() => {
                pathList.value.push({
                    name: '顶级类别',
                    parentId: 0
                })
                load()
            })
            return {
                columns,
                categoryList,
                load,
                showChildren,
                pathList,
                returnSuper
            }
        }
        
    }
</script>

<style scoped>

</style>